<template>
  <div class="search">
    <!-- <a-input placeholder="输入关键字">
            <a-icon style="color: rgba(255, 255, 255, 1)" slot="prefix" type="search" />
        </a-input> -->
    <input type="text" placeholder="输入关键字" />
    <a-icon class="icon" type="search" :style="{'color': 'rgba(255, 255, 255, 1)','fontSize':'20px'}" />
  </div>
</template>
<script></script>
<style lang="scss" scoped>
.search {
  width: 92%;
  height: 40px;
  margin: 20px 10px;
  box-sizing: border-box;
  position: relative;
  .icon{
    position: absolute;
    top: 10px;
    left: 13px;
  }
  input {
    width: 100%;
    height: 100%;
    background: #2b3240;
    outline: none;
    border: 0;
    color: #fff;
    padding-left: 37px;
  }
  input::-webkit-input-placeholder {
    /* WebKit browsers */
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.7;
  }

  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.7;
  }

  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.7;
  }

  input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.7;
  }
}
</style>
